<template>
  <page-loading :show="pageLoading" height="100vh">
    <!-- 手动添加异常项 -->
    <view class="add-manully-error-item">
      <view class="form-box">
        <label class="item name-box flex flex-ai-c flex-jc-sb">
          <text @click="isFocus = true">异常项目/零件名称</text>
          <input
            :disabled="index !== -1"
            type="text"
            :focus="isFocus"
            v-model="name"
            placeholder='例如:"驾驶位车门"'
            placeholder-style="color: #999;"
            class="name-input flex-1"
            maxlength="10"
            @blur="isFocus = false"
          />
        </label>

        <!-- 上传图片 -->
        <view class="item">
          <text class="title color-666 font-30"
            >上传图片({{ imgArr.length }}/10)</text
          >

          <view class="img-list flex flex-wrap-w">
            <view v-if="imgArr.length" class="flex flex-wrap-w">
              <view
                v-for="(item, index) in imgArr"
                :key="index"
                class="up-item"
                @click="showImg(index)"
              >
                <image :src="item" mode="aspectFit" class="img"></image>
              </view>
              <view
                v-if="imgArr.length < 10"
                class="up-item btn-upload"
                @click="selectImg()"
              >
                <i-icon icon="iconxiangji" size="50rpx" color="#999"></i-icon>
              </view>
            </view>
            <view v-else class="up-item btn-upload" @click="selectImg()">
              <i-icon icon="iconxiangji" size="50rpx" color="#999"></i-icon>
            </view>
          </view>
        </view>

        <!-- 问题描述/处理建议 -->
        <view class="item">
          <view class="title flex flex-jc-sb flex-ai-c">
            <text class="color-333 font-30">问题描述/处理建议</text>
            <!-- <i-icon icon="iconluyin" type="m" size="46rpx"></i-icon> -->
          </view>

          <view class="input-box">
            <view class="top-input flex">
              <i-icon icon="iconqiyebianji" color="#FBD220"></i-icon>
              <u-input
                :disabled="index !== -1"
                v-model="remark"
                type="textarea"
                maxlength="12"
                :auto-height="true"
                placeholder="请输入异常描述"
                placeholder-style="color: #999;"
                class="remark-input"
              />
              <!-- <textarea type="text"   /> -->
            </view>
            <view class="count color-999 font-24">{{ remark.length }}/12</view>
          </view>
        </view>
      </view>

      <!-- 底部固定按钮 -->
      <view class="btn-box flex flex-ai-c" v-if="index === -1">
        <view class="btn" @click="cancel()">
          <i-button
            text="取消"
            bg-color="#333"
            color="#FFE23E"
            shape="circleLeft"
          ></i-button>
        </view>
        <view class="btn" @click="confirm()">
          <i-button text="确认添加" color="#333" shape="circleRight"></i-button>
        </view>
      </view>

      <!-- 预览图片 -->
      <preview-image
        :imgs="imgArr"
        :index="currentIndex"
        :preview.sync="showPreviewImg"
      ></preview-image> </view
  ></page-loading>
</template>

<script>
import iButton from '@/components/carGoods/i-button.vue'
import previewImage from '@/components/i-preview-image'

export default {
  data() {
    return {
      id: '',
      name: '',
      remark: '',
      imgArr: [],
      showPreviewImg: false,
      index: -1, // 判断是否是编辑，-1为添加，其他数字为编辑状态
      currentIndex: 0, //图片预览当前页
      isFocus: false,
      pageLoading: false, //初始化加载效果
    }
  },

  onLoad(e) {
    this.id = e.id
    this.index = Number(e.index)
    if (this.index !== -1) {
      let data = JSON.parse(e.data)
      this.name = data.exceptionName
      this.imgArr = [...data.exceptionImgs]
      this.remark = data.exceptionReason
    }
    //从上检报告进入
    if (e.params) {
      const params = JSON.parse(e.params)
      this.name = params.exceptionName
      this.imgArr.push(params.exceptionImg)
    }
    this.$nextTick(() => {
      this.pageLoading = true
    })
  },

  methods: {
    // 选择图片
    selectImg() {
      if (this.index !== -1) {
        return
      }
      uni.showActionSheet({
        itemList: ['拍照', '打开相册'],
        success: (result) => {
          const cameraType = result.tapIndex ? 'album' : 'camera'
          uni.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'], //指定压缩图
            sourceType: [cameraType], // 从相册选择
            success: (res) => {
              uni.showLoading({
                title: '图片上传中~',
              })
              // 上传图片
              this.uploadImg({ filePath: res.tempFilePaths[0] })
            },
          })
        },
      })
    },

    // 上传图片
    async uploadImg(data) {
      // 上传图片
      try {
        const res = await this.$api.files.uploadImg(data)
        this.imgArr.push(res.baseUrl + res.url)
      } catch (err) {
        console.log(err)
      }
      uni.hideLoading()
    },

    // 取消
    cancel() {
      uni.navigateBack({
        delta: 1,
      })
    },

    // 确认添加
    confirm() {
      let tips = new Map([
        [this.remark, '请输入问题描述'],
        [this.imgArr.length, '请上传图片'],
        [this.name, '请输入名称'],
      ])
      let flag = false
      for (let key of tips.keys()) {
        if (!key) {
          uni.showToast({
            title: tips.get(key),
            icon: 'none',
          })
          flag = true
          break
        }
      }
      if (flag) return
      this.$api.afterSales
        .addWorkExcption({
          arriveId: this.id,
          exceptionName: this.name,
          exceptionImgs: this.imgArr,
          exceptionReason: this.remark,
        })
        .then((res) => {
          uni.showToast({
            title: '提交成功',
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 2000)
        })
        .catch((e) => {
          console.log(e)
        })
    },

    showImg(i) {
      this.currentIndex = i
      this.showPreviewImg = true
    },
  },

  components: {
    previewImage,
    iButton,
  },
}
</script>

<style lang="scss" scoped>
.add-manully-error-item {
  height: 100%;
  background-color: #f6f6f6;
}

.form-box {
  padding: 24rpx;

  .item {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;

    & + .item {
      margin-top: 20rpx;
    }

    .title {
      padding: 0 0 22rpx;
    }
  }

  // 异常名称
  .name-box {
    height: 90rpx;
    line-height: 90rpx;
    color: #666;

    .name-input {
      text-align: right;
      font-size: 28rpx;
    }
  }

  // 上传图片
  .img-list {
    .up-item {
      width: 120rpx;
      height: 90rpx;
      margin-top: 20rpx;
      margin-right: 12rpx;
      border: 1px solid #999999;
      border-radius: 10rpx;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .btn-upload {
      line-height: 100rpx;
      text-align: center;
      border: 1px dashed #999999;
    }
  }

  // 备注建议
  .input-box {
    padding: 12rpx 20rpx;
    border: 1px solid #eeeeee;
    border-radius: 10rpx;

    .i-icon {
      margin: 16rpx 10rpx 0 0;
    }

    .remark-input {
      font-size: 26rpx;
    }

    .count {
      text-align: right;
    }
  }
}

// 底部按钮
.btn-box {
  position: fixed;
  bottom: 0;
  z-index: 6;
  width: 100%;
  height: 120rpx;
  padding: 0 24rpx;
  background-color: #fff;

  .btn {
    width: 50%;

    .i-button {
      width: 100%;
    }
  }
}
</style>
